<!-- 新增一个控制器 依据提供的控制器类型 -->
<script setup lang="ts">
import Nifi from 'src/nifi';
import { ElInput, ElForm, ElFormItem, ElMessage, ElSelectV2,ElButton } from "element-plus"
import { reactive, computed, ref } from 'vue';
// import { IPackAntvX6 } from '@ui/pack-antv-x6';
import {t} from "../../i18n/index"

interface Props {
    type: string
    bundle: { group: string, artifact: string, version: string }
    nifi: Nifi
    groupId?: string
    // box?: IPackAntvX6.DialogEl
}

const emits = defineEmits<{finish:[boolean|string]}>();
const { type, bundle, nifi, groupId } = defineProps<Props>()

const { group, artifact, version } = bundle;

const formRef = ref<InstanceType<typeof ElForm>>();
const serviceTypes = reactive<any[]>([])
const data = reactive({ type: "", name: "" })

// 查询 CS type 
const initServiceTypes = async () => {
    const url = `/nifi-api/flow/controller-service-types?serviceType=${type}&serviceBundleGroup=${group}&serviceBundleArtifact=${artifact}&serviceBundleVersion=${version}`;
    try {
        const res = await nifi.api.get(url);
        const d = res.controllerServiceTypes || [];
        //
        serviceTypes.push(...d);
        //
        data.type = d[0]?.type || '';
        data.name = d[0]?.type?.split('.').pop() || '';
    } catch (error) {
        ElMessage.error(t('propertiesitem-getcstype-failed',{error}));
        console.error(error)
    }
}
//
initServiceTypes();
//

const handleTypeChange = (v: string) => {
    data.name = v.split('.').pop() || '';
}

const serviceType = computed(() => {
    const t = data.type;
    const d = serviceTypes.filter(n => n.type == t)[0];
    return d || {};
})
// 提交的回调
const submit = async () => {
    try {
        await formRef.value?.validate();
    } catch (error) {
        ElMessage.warning(t('form-validate-failed'))
        return false;
    }
    // 
    const d = {
        component: { name: data.name, type: data.type, bundle: serviceType.value.bundle },
        disconnectedNodeAcknowledged: false,
        revision: { version: 0, clientId: nifi.flow.clientId }
    };
    //
    try {
        const res = await nifi.ControlService.add(d,groupId || nifi.group.id)
        //
        emits('finish',res.id)
    } catch (error) {
        ElMessage.error(t('propertiesitem-addcs-failed',{error}));
        console.error(error)
    }

}


const handleSubmit = () => {
    submit();
}
const handleCancel = () => {emits("finish",false)}


</script>

<template>
    <div class="w-40vw h-40vh min-h-400px flex flex-col gap-8px box-border">
        <div class="h-40px flex items-center justify-between">
            <b>{{ t('propertiesitem-add-cs') }}</b>
            <div>
                <ElButton @click="handleCancel">{{ t('box-cancel-text') }}</ElButton>
                <ElButton @click="handleSubmit">{{ t('box-submit-text') }}</ElButton>
            </div>
        </div>
        <div class="flex-1 overflow-hidden flex flex-col">
            <el-form :model="data" ref="formRef">
                <el-form-item :label="t('propertiesitem-type-label')" prop="type" required>
                    <ElSelectV2 v-model="data.type" @change="handleTypeChange" :key="serviceTypes.length"
                        :options="serviceTypes.map(t => ({ value: t.type, label: `${t.type.split('.').pop()}@${t.bundle.version}` }))">
                    </ElSelectV2>
                    <!-- <el-select v-model="data.type" @change="handleTypeChange">
                    <el-option v-for="t in serviceTypes" :value="t.type" :key="t.type">{{ t.type.split('.').pop() }}@{{
                        t.bundle.version }}</el-option>
                </el-select> -->
                </el-form-item>
                <el-form-item :label="t('propertiesitem-name-label')" prop="name" required>
                    <el-input v-model="data.name"></el-input>
                </el-form-item>
            </el-form>
            <div class="flex-1 max-h-300px box-border p-8px overflow-y-auto overflow-x-hidden scrollbar-thin">
                <fieldset class="p-12px p-t-2px rd-4px b-gray-300 b-solid">
                    <legend class="c-#999">{{t('propertiesitem-info')}}</legend>
                    <p>{{ serviceType?.bundle?.group }} {{ serviceType?.bundle?.artifact }} @ {{
                        serviceType?.bundle?.version }}</p>
                </fieldset>
                <fieldset class="p-12px p-t-2px rd-4px b-gray-300 b-solid">
                    <legend class="c-#999">{{t('propertiesitem-tag')}}</legend>
                    <p>{{ serviceType?.tags?.join(',') }}</p>
                </fieldset>
                <fieldset class="p-12px p-t-2px rd-4px b-gray-300 b-solid">
                    <legend class="c-#999">{{t('propertiesitem-desc')}}</legend>
                    <p>{{ serviceType?.description }}</p>
                </fieldset>
            </div>
        </div>

    </div>
</template>